<template>
  <div>
    <el-sub-menu v-if="hasChild" :index="model.name">
      <template #title>
        <span>{{ model.name }}</span>
      </template>

      <template #default>
        <MenuItem v-for="item in model.children" :model="item" />
      </template>
    </el-sub-menu>

    <el-menu-item v-else :index="model.name">
      <span>{{ model.name }}</span>
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name: "MenuItem",

  props: ["model"],

  computed: {
    hasChild() {
      return this.model.children && this.model.children.length > 0;
    },
  },
};
</script>
